<template>
  <view class="page">
    <image class="poster" mode="widthFix" :src="getShowNginxPicUrl('F66AMZ6wuqTN8acmebZU.png')"></image>
    <!--		加入按钮-->
    <view class="btn" @click="() => $refs.popup.open()" v-if="!hasFillInformation">立即加入</view>
    <!--		寻找兼职按钮-->
    <view
      class="btn"
      v-else
      @click="
        () => {
          if (redirectUrl) {
            $uni.redirectTo({
              url: redirectUrl,
            })
          } else {
            $uni.navigateBack()
          }
        }
      "
      >寻找兼职</view
    >
    <uni-popup type="center" ref="popup" :is-mask-click="false">
      <view class="popup-content">
        <image class="close-btn" :src="closeIcon" @click="() => $refs.popup.close()"></image>
        <view class="content">
          <view class="title">加入校务行勤工助学团队</view>
          <view class="sub-title">请填写以下信息以便核实学生身份：</view>
          <view class="form-item">
            <view class="label required">学校：</view>
            <view class="value">
              <view class="input-container">
                <input v-model="inputForm.schoolName" placeholder="请输入你的学校名称" class="input" />
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="label required">年级：</view>
            <view class="value">
              <view class="input-container">
                <input v-model="inputForm.schoolGrade" placeholder="请输入你的年级" class="input" />
              </view>
            </view>
          </view>
          <view class="sub-title" style="margin-top: 70rpx">请填写以下信息以便支付兼职费用：</view>
          <view class="form-item">
            <view class="label required">姓名（昵称）：</view>
            <view class="value">
              <view class="input-container">
                <input v-model="inputForm.studentName" placeholder="请输入你的姓名" class="input" />
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="label required">联系方式：</view>
            <view class="value">
              <view class="input-container">
                <input v-model="inputForm.studentPhone" placeholder="请输入你的手机号码" class="input" />
              </view>
            </view>
          </view>
          <view class="sub-title" style="margin-top: 70rpx">请填写以下信息享受督学会员权益：</view>
          <view class="form-item">
            <view class="label required">就读专业：</view>
            <view class="value">
              <view class="input-container">
                <input v-model="inputForm.studentProfession" placeholder="请输入你的就读专业" class="input" />
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="label required">需求意向：</view>
            <view class="value">
              <view class="picker-container" @click="() => $refs.popupSelectorMultiple.open(inputForm.equityIntentionList)">
                <view class="text placeholder" v-if="inputForm.equityIntentionList.length <= 0">请选择你需要的学习资料</view>
                <view class="text" v-else>
                  <block v-for="(item, index) in inputForm.equityIntentionList" :key="item">
                    <text>{{ item }}</text>
                    <text v-if="index < inputForm.equityIntentionList.length - 1">、</text>
                  </block>
                </view>
                <image class="icon" :src="downArrowIcon"></image>
              </view>
            </view>
          </view>
          <view class="submit-btn" @click="submit">提交</view>
        </view>
      </view>
    </uni-popup>

    <popupSelectorMultiple
      ref="popupSelectorMultiple"
      :pickerOptionListProps="[
        {
          value: '考研',
          label: '考研',
        },
        {
          value: '英语四六级',
          label: '英语四六级',
        },
        {
          value: '专业课',
          label: '专业课',
        },
        {
          value: '雅思托福',
          label: '雅思托福',
        },
        {
          value: '专四专八',
          label: '专四专八',
        },
        {
          value: '教师资格证',
          label: '教师资格证',
        },
      ]"
      @conform="(val) => (inputForm.equityIntentionList = val)"
      title="选择你要领取的资料（多选）"
      :allowFill="true"
    ></popupSelectorMultiple>
    <!--		邀请有礼活动图标-->
    <image
      class="rewarding-invitation-icon"
      :src="getShowNginxPicUrl('cJvH7jbWAtkjvrx67osa.png')"
      @click="() => $uni.navigateTo({ url: '/markingCampaign/pages/partTimeJobRecruit/rewardingInvitations/index' })"
    ></image>
  </view>
</template>

<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import closeIcon from "./assets/close.png"
import popupSelectorMultiple from "@/components/popupPicker/popupSelectorMultiple.vue"
import downArrowIcon from "./assets/down_arrow.png"
import { showModal, showModalPromise, showToast } from "@/utils"
import request from "@/utils/request"
import persistence from "@/store/persistence"
import store from "@/store"
import { userActionType } from "@/store/modules/user"

export default {
  components: { popupSelectorMultiple },
  methods: {
    getShowNginxPicUrl,
    // 提交
    async submit() {
      // 检查表单输入
      if (!this.inputForm.schoolName) {
        showToast.default("请输入学校名称")
        return
      }
      if (!this.inputForm.schoolGrade) {
        showToast.default("请输入年级")
        return
      }
      if (!this.inputForm.studentName) {
        showToast.default("请输入姓名（昵称）")
        return
      }
      if (!this.inputForm.studentPhone || !/^1[3456789]\d{9}$/.test(this.inputForm.studentPhone)) {
        showToast.default("请输入正确的手机号码")
        return
      }
      if (!this.inputForm.studentProfession) {
        showToast.default("请输入就读专业")
        return
      }
      if (this.inputForm.equityIntentionList.length <= 0) {
        showToast.default("请选择需求意向")
        return
      }
      await showModalPromise({
        title: "提示",
        content: "为了避免加入失败，提交之前请检查填写的信息是否有误",
        confirmText: "确认无误",
        cancelText: "我再看看",
      })
      await request({
        url: "recruitmentUserinfo/addRecruitmentUserinfo",
        data: {
          ...this.inputForm,
          shareUserId: this.shareUserId,
        },
        showLoading: true,
        errorHandle: true,
      })
      await showModalPromise({
        content: "已成功加入校务行勤工助学团队",
        showCancel: false,
      })
      this.hasFillInformation = true
      this.$refs.popup.close()
      // 信息录入完毕后返回上一页
      if (this.navigateBackAfterSubmit) {
        uni.navigateBack()
      }
    },
  },
  data() {
    return {
      closeIcon,
      downArrowIcon,
      inputForm: {
        schoolName: "", // 学校名称
        schoolGrade: "", // 年级
        studentName: "", // 学生姓名
        studentPhone: "", // 学生电话
        studentProfession: "", // 学生专业
        equityIntentionList: [], // 需求权益意向
        sourceLocation: "", // 录入点位
      },
      hasFillInformation: false, // 先前是否有录入信息
      redirectUrl: "",
      navigateBackAfterSubmit: false, // 录入成功后是否返回上一页
      shareUserId: "", // 分享人id，邀请有礼活动
    }
  },
  onLoad(e) {
    if (e.sourceLocation) {
      this.inputForm.sourceLocation = e.sourceLocation
    }
    if (e.redirectUrl) {
      this.redirectUrl = decodeURIComponent(e.redirectUrl)
    }
    if (e.navigateBackAfterSubmit === "true") {
      this.navigateBackAfterSubmit = true
    }
    if (persistence.shareType.get() === "兼职招募邀请有礼活动") {
      this.shareUserId = persistence.shareUserId.get()
      persistence.shareType.set("")
      persistence.shareUserId.set("")
    }
    // 查询先前是否有填过
    request({
      url: "recruitmentUserinfo/getRecruitmentUserinfo",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.hasFillInformation = !!data
    })
    // 取 userinfo 里面用户绑定的手机号码
    store.dispatch(userActionType.action.userInfo).then((userInfo) => {
      userInfo.phone && (this.inputForm.studentPhone = userInfo.phone)
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  > .poster {
    width: 100%;
  }
  > .btn {
    position: fixed;
    bottom: calc(70rpx + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: white;
    background: #ff6219;
    border-radius: 40rpx;
  }
  .popup-content {
    background: white;
    border-radius: 30rpx;
    border: 2rpx solid rgba(187, 187, 187, 1);
    position: relative;
    width: 700rpx;
    overflow: hidden;
    > .close-btn {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
      width: 30rpx;
      height: 30rpx;
    }
    > .content {
      padding: 40rpx 30rpx;
      > .title {
        font-size: 36rpx;
        font-weight: 500;
      }
      > .sub-title {
        font-size: 32rpx;
        font-weight: 500;
        margin-top: 30rpx;
      }
      > .form-item {
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        > .label {
          font-size: 30rpx;
          &.required::before {
            content: "* ";
            color: red;
          }
        }
        > .value {
          width: 0;
          flex: 1;
          > .input-container {
            border: 2rpx solid rgba(187, 187, 187, 1);
            padding: 10rpx 20rpx;
            font-size: 30rpx;
            > .input {
              width: 100%;
            }
          }
          > .picker-container {
            border: 2rpx solid rgba(187, 187, 187, 1);
            padding: 10rpx 20rpx;
            font-size: 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            > .text {
              line-height: 1.5;
              width: 0;
              flex: 1;
              // 文本溢出加省略号
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            > .placeholder {
              color: #808080;
            }
            > .icon {
              width: 30rpx;
              height: 40rpx;
            }
          }
        }
      }
      > .submit-btn {
        margin-top: 40rpx;
        background: var(--theme-color);
        font-size: 30rpx;
        color: white;
        width: 100%;
        padding: 25rpx 0;
        text-align: center;
        border-radius: 44rpx;
      }
    }
  }
  > .rewarding-invitation-icon {
    position: fixed;
    right: 30rpx;
    bottom: calc(50rpx + env(safe-area-inset-bottom));
    width: 100rpx;
    height: 100rpx;
  }
}
</style>
